<template>
  <div class="setup">
    <div class="all-page">
      <div class="all-top">
        <div class="page-left">
          <h1>问卷显示</h1>
          <div class="left-one">
            <h3>问卷显示问题编号</h3>
            <el-switch
              v-model="show_number"
              active-color="#2b87ff"
              inactive-color="#c9ccd1"
              @change="show_num"
            >
            </el-switch>
          </div>
          <div class="left-one">
            <h3>问卷随机选题</h3>
            <el-switch
              v-model="is_out_of_order"
              active-color="#2b87ff"
              inactive-color="#c9ccd1"
              @change="out_order"
            >
            </el-switch>
          </div>
        </div>
        <div class="page-right">
          <h1>回收设置</h1>
          <div class="left-two">
            <h3>设定问卷起止时间</h3>
            <el-switch
              v-model="is_set_date"
              active-color="#2b87ff"
              inactive-color="#c9ccd1"
              @change="date"
            >
            </el-switch>
          </div>
          <!-- <div class="tag">
          (默认为：发布时间-无期)
        </div> -->
        <div class="block" v-if="is_set_date">
          <el-date-picker
            v-model="start"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="set_date"
          >
          </el-date-picker>
        </div>
        <div class="tag">
          (默认为：发布时间-无期)
        </div>
        <div class="left-one">
          <h3>是否允许再次修改</h3>
          <el-switch
            v-model="is_allowed_to_change"
            active-color="#2b87ff"
            inactive-color="#c9ccd1"
            @change="allowed_to_change"
          >
          </el-switch>
        </div>
        <!-- <div class="left-one">
          <h4>问卷回收提醒</h4>
          <el-switch
            v-model="is_remind"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="remind"
          >
          </el-switch>
        </div> -->
        <!-- <div class="left-one">
          <h4>允许用户修改答案</h4>
          <el-switch
            v-model="Rvaluefour"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div> -->
        </div>
      </div>
      <!-- <div class="buttons">
        <el-button type="primary">确认保存</el-button>
        <el-button type="info">取消</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "SetUp",
    props: {
      questionnaire_ids: Number,
    },
    async created() {
      this.questionnaire_id = this.questionnaire_ids;
      if (typeof(this.questionnaire_id) == 'string') {
        await axios
          .post("decode/", {
            questionnaire_id: this.questionnaire_id,
          })
          .then((response) => {
            if (response.data.code == -1) {
              this.$router.push({
                path: "/failure",
                query: {
                  msg: "该问卷不存在或您没有权限访问",
                },
              });
            }
            this.questionnaire_id = response.data.id;
          });
      }
        await axios
          .post("settings/", { questionnaire_id: this.questionnaire_id })
          .then((res) => {
            console.log(res.data.show_number);
            // eslint-disable-line no-unused-vars
            (this.show_number = res.data.show_number),
              (this.is_out_of_order = res.data.is_out_of_order),
              (this.is_set_date = res.data.is_set_date),
              (this.is_allowed_to_change = res.data.is_allowed_to_change),
              (this.is_remind = res.data.is_remind),
              (this.start = res.data.start);
          });
    },
    data() {
      return {
        start: ["2021-08-09T16:00:00.000Z", "2021-09-13T16:00:00.000Z"],
        show_number: true,
        is_out_of_order: true,
        is_set_date: true,
        is_allowed_to_change: true,
        is_remind: true,
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: "",
        questionnaire_id: null,
      };
    },
    methods: {
      show_num() {
        axios.post("change/", {
          questionnaire_id: this.questionnaire_id,
          show_number: this.show_number,
        });
      },
      out_order() {
        axios.post("change/", {
          questionnaire_id: this.questionnaire_id,
          is_out_of_order: this.is_out_of_order,
        });
      },
      set_date() {
        if (this.is_set_date === true) {
          axios.post("change/", {
            questionnaire_id: this.questionnaire_id,
            is_set_date: this.is_set_date,
            start: this.start,
          });
        }
      },
      allowed_to_change() {
        axios.post("change/", {
          questionnaire_id: this.questionnaire_id,
          is_allowed_to_change: this.is_allowed_to_change,
        });
      },
      remind() {
        console.log(this.is_remind);
        axios.post("change/", {
          questionnaire_id: this.questionnaire_id,
          is_remind: this.is_remind,
        });
      },
      date() {
        axios.post("change/", {
          questionnaire_id: this.questionnaire_id,
          is_set_date: this.is_set_date,
        }),
          axios
            .post("settings/", { questionnaire_id: this.questionnaire_id })
            .then((res) => {
              console.log(res.data.show_number);
              // eslint-disable-line no-unused-vars
              this.start = res.data.start;
            });
      },
    },
  };
</script>

<style scoped>
.setup {
  height: 100%;
}
.all-page {
  border-radius: 8px;
  background: #f8f7f7;
  width: 100%;
  height: 100%;
  position: fixed;
}
.all-top {
  border-radius: 8px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 0 auto;
  width: 1200px;
  height: 500px;
}
.page-left {
  border-radius: 8px;
  justify-content: space-around;
  margin-left: 50px;
  margin-top: 20px;
  background: #ffffff;
  width: 500px;
  height: 500px;
  text-align: center;
}
.page-right {
  border-radius: 8px;
  /* justify-content: space-around; */
  margin-right: 50px;
  margin-top: 20px;
  background: #ffffff;
  width: 500px;
  height: 500px;
  text-align: center;
}
h2 {
  margin: 0 auto;
  font-size: 22px;
  margin-top: 20px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.block {
  padding-bottom: 20px;
  padding-left: 0px;
}
.left-one {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding-left: 50px;
  padding-right: 50px;
}
.left-two {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 0px;
  padding-left: 50px;
  padding-right: 50px;
}
.tag {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: 0px;
  font-size: 10;
  font-family: "微软雅黑";
} 
.buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 100px;
  padding-left: 450px;
  padding-right: 480px;
}
</style>
